<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fc="http://fctracker.com/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pe="http://primefaces.org/ui/extensions">
	<p:fieldset legend="Receptek">
		<h:form id="recipeTableForm">
			<p:dataTable id="recipeTable" var="recipe"
				value="#{recipeTableController.recipes}" paginator="true" rows="5"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
				paginatorPosition="bottom" rowKey="#{recipe.id}"
				selection="#{recipeTableController.selected}" selectionMode="single"
				emptyMessage="Az adott paraméterekkel nem található recept."
				filteredValue="#{recipeTableController.filtered}">

				<p:ajax event="rowSelect" update=":detailsdiv" render=":detailsdiv" />

				<p:column headerText="Név" filterBy="name" styleClass="nameColumn"
					filterMatchMode="contains" sortBy="name">
					<h:outputText value="#{recipe.name}" />
				</p:column>

				<p:column headerText="Adag" styleClass="numberColumn">
					<h:outputText value="#{recipe.dose}" />
				</p:column>

				<p:column headerText="Kalória (kcal)" sortBy="sumCalorie"
					styleClass="numberColumn">
					<h:outputText value="#{recipe.sumCalorie}" />
				</p:column>

				<p:column headerText="Fehérje (g)" sortBy="sumProtein"
					styleClass="numberColumn">
					<h:outputText value="#{recipe.sumProtein}" />
				</p:column>

				<p:column headerText="Szénhidrát (g)" sortBy="sumCarbohydrate"
					styleClass="numberColumn">
					<h:outputText value="#{recipe.sumCarbohydrate}" />
				</p:column>

				<p:column headerText="Zsír (g)" sortBy="sumFat"
					styleClass="numberColumn">
					<h:outputText value="#{recipe.sumFat}" />
				</p:column>

				<p:column headerText="Rost (g)" sortBy="sumFiber"
					styleClass="numberColumn">
					<h:outputText value="#{recipe.sumFiber}" />
				</p:column>

				<p:column headerText="Műveletek" styleClass="actionColumn">
					<p:commandButton update="recipeTable"
						render="recipeTable" icon="ui-icon-trash"
						action="#{recipeTableController.requestRefresh}"
						actionListener="#{recipeTableController.delete(recipe)}"
						ajax="true" />

				</p:column>

				<f:facet name="footer">
					<p:commandButton value="" styleClass="addButton"
						actionListener="#{addRecipeDialog.show()}">
						<p:ajax event="dialogReturn" update="@form"
							listener="#{recipeTableController.requestRefresh}" />
					</p:commandButton>
				</f:facet>

			</p:dataTable>
		</h:form>
	</p:fieldset>
	<p:fieldset style="margin-top: 10px">
		<h:panelGroup layout="block" id="detailsdiv">
			<h:panelGroup rendered="#{recipeController.recipe != null}">
				<fc:recipeData recipe="#{recipeController.recipe}" />
			</h:panelGroup>
		</h:panelGroup>
	</p:fieldset>
</ui:composition>